<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<!-- serch -->
		<div class="search">
			<div class="searchBot f f-a-c f-j-b">
				<div class="inpBox f f-a-c">
					<input type="text" class="inp" v-model="search" placeholder="Search.." name="" id="" />
					<div @click="goSearch" class="scheBtn f f-a-c f-j-c hand"><img src="/src/assets/sche.png" class="scheImg" alt="" /></div>
				</div>
				<div class="rigTab f f-a-c">
					<div class="rigTitle">Popular:</div>
					<div class="tabsTit hand" @click="fuSearch(item.value)" v-for="(item, index) in port.setting" :key="index">{{ item.value }}</div>
				</div>
			</div>
		</div>
		<!-- tabs -->
		<div class="waiTabs">
			<div class="tabs f f-a-c f-j-b m-0-a">
				<div class="leftTabs">
					<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
						<div v-for="(item, index) in port.tabsList" :key="index">
							<el-tab-pane :label="item.label" :name="index"></el-tab-pane>
						</div>
					</el-tabs>
				</div>
				<!-- <div @click="showDrawer(1)" class="rigTu"><img src="/src/assets/serch/move.png" class="moveImg hand" alt="" /></div> -->
				<div @mouseenter="showDrawer(1)" class="rigTu"><img src="/src/assets/serch/move.png" class="moveImg hand" alt="" /></div>
			</div>
			<div v-show="drawerShow" @click="removePop" class="mask">
				<div @click.stop="showDrawer(2)" class="maskBox animate-fadeInDown">
					<div class="maskBoxShow f f-a-c f-w-w">
						<div v-for="(ite, inde) in port.popoList" @click.stop="sectList(ite, inde)" :key="inde" class="maskItem hand">{{ ite.label }}</div>
					</div>
				</div>
			</div>
		</div>
		<!--下面的下拉 -->
		<div class="Screening f f-a-c">
			<div class="screeningItem">
				<el-dropdown max-height="200" trigger="click">
					<span class="el-dropdown-link hand"> {{ cond.topics || "Topic" }} <img src="/src/assets/serch/Frame_1@2x.png" class="Frame_1" alt="" /> </span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item v-for="(item, index) in port.topicsList" @click="qieTopics(item)" :key="index">{{ item.name }}</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
			<div class="screeningItem">
				<el-dropdown max-height="200" trigger="click">
					<span class="el-dropdown-link hand"> {{ addressNmae }} <img src="/src/assets/serch/Frame_1@2x.png" class="Frame_1" alt="" /> </span>
					<template #dropdown>
						<el-dropdown-menu>
							<!-- <el-dropdown-item>All</el-dropdown-item> -->
							<el-dropdown-item v-for="(item, index) in port.addressList" @click="qieAddress(item)" :key="index">{{ item.name }}</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
			<div class="screeningItem">
				<el-dropdown max-height="200" trigger="click">
					<span class="el-dropdown-link hand"> {{ cond.language || "Language" }} <img src="/src/assets/serch/Frame_1@2x.png" class="Frame_1" alt="" /> </span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item v-for="(item, index) in port.language" @click="qieLanguage(item)" :key="index">{{ item.value }}</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
		</div>
		<!-- 47 experts found -->
		<div class="found">
			<div class="foundTop f f-a-c f-j-b">
				<div class="foundLrft">{{ port.foundList?.length || 0 }} similar experts</div>
				<div class="foundRig f f-a-c">
					<div class="sort">Sort by</div>
					<el-dropdown max-height="200" trigger="click">
						<span class="el-dropdown-link hand">
							{{ Price }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item @click="dropdowns('lowPrice', 'Price')">Price: low - high</el-dropdown-item>
								<el-dropdown-item @click="dropdowns('highPrice', 'Price')"> Price: high - low </el-dropdown-item>
								<el-dropdown-item @click="dropdowns('level', 'Rating')">Rating</el-dropdown-item>
								<el-dropdown-item @click="dropdowns('lastLogin', 'Recent active')">Recent active</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>
			</div>
			<!-- /下面的列表 -->
			<div class="f f-a-c f-w-w">
				<div v-for="(item, index) in port.foundList" :key="index" class="financialItem hand f-s">
					<div class="topAvatr">
						<div class="topSckr f f-a-c">
							<img src="/src/assets/Star.png" class="Star" alt="" />
							<div class="strNum">{{ item.level }}/5</div>
						</div>
						<div @click="goUserInfo(item)" class="avatr f f-a-c">
							<div class="leftAva"><img :src="item.avatar || ''" class="avater" alt="" /></div>
							<div class="address">
								<div class="name">{{ item.firstName }}{{ item.lastName }}</div>
								<div class="cof">{{ item.position }}</div>
								<div class="addre f f-a-c f-j-c"><img src="/src/assets/address.png" class="imgAva" alt="" />{{ item.areaName || "--" }}</div>
							</div>
						</div>
						<!-- 下方的 -->
						<div class="topice f f-a-c f-w-w">
							<div class="topTit">Topics:</div>
							<div v-for="(ite, ind) in item.topicNames" :key="ind" class="topiceBox">{{ ite }}</div>

							<!-- <div class="topiceBox">M&A</div>
							<div class="topiceBox">Rental</div>
							<div class="topiceBox">Cooperate law</div> -->
						</div>
					</div>
					<!-- count -->
					<div class="count">{{ item.myDescribe }}</div>
					<div style="width: 120px; height: 40px" class="btn">
						<ButtonDiffuse :name="'From $' + item.lowPrice" />
					</div>
				</div>
			</div>
			<div class="hand">
				<div class="example-pagination-block f f -a-c f-j-c">
					<el-pagination @size-change="sizeChange" @current-change="currentChange" layout="prev, pager, next" :total="total" />
				</div>
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ElMessage } from "element-plus";
	import { ClassificationTree, TopicsList, SettingList, AdddressList } from "@/api/commonality.js";
	import { SearchProt } from "@/api/xpert.js";
	import { ArrowDown, Check, CircleCheck, CirclePlus, CirclePlusFilled, Plus } from "@element-plus/icons-vue";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import { useRoute } from "vue-router";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	import { ref, onMounted, reactive } from "vue";
	const topics = ref("");
	const route = useRoute();
	let activeName = ref(-1);
	let oneId = route.query.id || "";
	let index = route.query.index || -1;
	const addressNmae = ref("Location");
	let tabInd = ref(0);
	let search = ref("");
	let Price = ref("Price");
	let statusTab = ref(1);
	let drawerShow = ref(false);
	let total = ref(0);

	let pageNum = ref(1);
	let port = reactive({
		tabsList: [],
		popoList: [],
		topicsList: [],
		setting: [],
		addressList: [],
		language: [],
		foundList: []
	});
	let cond = reactive({
		price: "lowPrice",
		language: "",
		topics: "",
		areaCode: "",
		industry: ""
	});

	onMounted(async () => {
		if (oneId) {
			cond.industry = oneId;
			activeName.value = Number(index);
			// console.log(cond.industry, activeName.value);
		}
		topics.value = "";
		// 获取地址列表
		address();
		// 获取配置列表
		settingList();
		topicsList();

		// 获取分类
		await handleClose();
		handleSearch();
		window.addEventListener("scroll", handleScroll);
	});
	const goSearch = () => {
		pageNum.value = 1;
		handleSearch();
	};
	// 搜索接口
	const handleSearch = async () => {
		let obj = {
			keyword: search.value,
			topicId: topics.value || "",
			language: cond.language || "",
			areaCode: cond.areaCode || "",
			industry: cond.industry || "",
			sortByColumns: cond.price == "highPrice" ? "lowPrice" : cond.price,
			sortByColumnsSort: cond.price == "lowPrice" ? "ASC" : "DESC",
			pageNum: pageNum.value
		};
		// console.log(obj, "45454544");
		// return;
		let n = await SearchProt(obj);
		total.value = n.data.total;
		port.foundList = n.data.list;
	};
	// 切换地址topics
	const qieAddress = item => {
		cond.areaCode = item.code;
		addressNmae.value = item.name;
		pageNum.value = 1;
		handleSearch();
	};
	// 切换语言
	const qieLanguage = item => {
		cond.language = item.value;
		pageNum.value = 1;
		handleSearch();
	};
	// 切换tabs
	const qieTopics = item => {
		topics.value = item.id;
		cond.topics = item.name;
		pageNum.value = 1;
		handleSearch();
	};

	// 获取topics
	const topicsList = async () => {
		let n = await TopicsList();
		port.topicsList = n.data;
	};

	// 获取基础配置列表
	const settingList = async () => {
		let n = await SettingList({ title: "xp_popular" });
		port.setting = n.data;
		// 获取语言配置
		let m = await SettingList({ title: "language" });
		port.language = m.data;
	};
	// 获取地区列表
	const address = async () => {
		let n = await AdddressList();
		port.addressList = n.data;
	};
	// 点击推荐
	const fuSearch = count => {
		search.value = count;
	};

	const handleClose = async done => {
		let n = await ClassificationTree();
		port.tabsList = n.data;
		// 默认请求第一个分类
		// port.industry = n.data[0].id;
	};
	const showDrawer = num => {
		port.popoList = port.tabsList;
		drawerShow.value = !drawerShow.value;
	};
	// 点击筛选
	const dropdowns = (e, s) => {
		// console.log(e, "0000000");
		cond.price = e;
		Price.value = s;
		pageNum.value = 1;
		handleSearch();
	};
	// 切换tabs
	const sectList = (item, index) => {
		cond.industry = item.id;
		drawerShow.value = false;
		if (item.level == 1) {
			activeName.value = index;
		}
		pageNum.value = 1;
		handleSearch();
	};
	// tabs
	const handleClick = (tab, e) => {
		cond.industry = port.tabsList[tab.index].id;
		console.log(tab.index, e, "123456");
		tabInd.value = tab.index;
		port.popoList = port.tabsList[tabInd.value].children;
		// id存起来
		cond.industry = port.tabsList[tabInd.value].id;
		drawerShow.value = true;
		pageNum.value = 1;
		// 请求
		handleSearch();
	};
	// 点击去个人主页
	const goUserInfo = item => {
		// console.log(item);
		// return;
		router.push({ path: "/PersonalHome", query: { userId: item.userId } });
	};
	// 切换分页
	const sizeChange = e => {
		console.log(e, "1111111");
	};
	// 切换分页
	const currentChange = e => {
		console.log(e, "222222");
		pageNum.value = e;
		handleSearch();
	};
	// 当移除时
	const removePop = () => {
		drawerShow.value = false;
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
